<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			html {
				height: 100%;
			}
			
			body {
				position: relative;
				background: url(img/dz2.jpg) no-repeat 0 0/cover;
				min-height: 600px;
				height: 100%;
			}
			
			.wrap {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 3;
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			
			.wrap img {
				position: absolute;
				top: -100px;
				transform: translateY(0);
				animation: slateY 20s linear;
			}
			
			@keyframes slateY {
				0% {
					top: -100px;
				}
				100% {
					top: 1500px;
				}
			}
			
			.fs {
				position: fixed;
				right: 25px;
				bottom: 60px;
				z-index: 1;
				width: 150px;
				height: 140px;
				padding-top: 40px;
				text-align: center;
				font-size: 60px;
				background: url(img/fs.png) no-repeat 0 0/cover;
			}
			
			.bottom {
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 999;
				width: 100%;
				height: 40px;
				background: rgba(0, 0, 0, 0.7);
			}
			
			.bottom button {
				width: 160px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				border: none;
				outline: none;
				cursor: pointer;
				background: url(img/stop.png) no-repeat center center/cover;
			}
			
			.xiayiguan {
				position: absolute;
				left: 0;
				right: 0;
				top: -414px;
				z-index: 999;
				margin: 0 auto;
				width: 550px;
				height: 414px;
				cursor: pointer;
			}
			
			.xiayiguan img {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div class="wrap">

		</div>
		<div class="fs">
			0
		</div>
		<div class="bottom">
			<button class="off">暂停游戏</button>
			<button class="on">开始游戏</button>
		</div>
		<div class="xiayiguan">
			<img src="img/cg.png" />
		</div>
		<script src="jquery.min.js"></script>
		<script type="text/javascript">
			var $wrap = $(".wrap");
			var $off = $(".off");
			var $on = $(".on");
			var $fs = $(".fs");
			var wrapWidth = $wrap.width();
			var wrapHeight = $wrap.height();
			console.log(wrapWidth, wrapHeight)
			var fs = 0;
			var img;
			var arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "G", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
			var wraparr = [];
			var inter;
			var num = 0;
			var onoff = true; //控制游戏按钮
			var sd=1000;//控制速度
			//暂停游戏按钮
			$off.on("click", onClick);
			function onClick(){
				$(document).off("keydown");
				onoff = true;
				clearInterval(inter);
				$(".wrap img").css("animation-play-state", "paused");
			}
			//开始游戏按钮
			$on.on("click", offClick);
			function offClick(){
				if(onoff) {
					$(document).on("keydown", function(e) {dKeydown(e)})
					$(".wrap img").css("animation-play-state", "running")
					inter = setInterval(kaishi, sd);
					onoff = false;
				}
			}
			function kaishi() {
				if(arr.length == 0) {
					clearInterval(inter);
					return;
				}
				var num = Math.floor(Math.random() * arr.length);
				var left = Math.random() * (wrapWidth - 100);
				var zm = arr.splice(num, 1);
				wraparr.push(zm[0])
				var $img = $("<img src='img/" + zm + ".png'/>");
				$img.css("left", left);
				$img.data("name", zm[0])
				//					$img.animate({
				//						top: wrapHeight
				//					}, 10000)
				$wrap.append($img);
				$(".wrap img").each(function() {
					console.log($(this).position().top);
					if($(this).position().top > wrapHeight) {
						arr.push($(this).data("name"));
						for(var i = 0; i < wraparr.length; i++) {
							if(wraparr[i] == $(this).data("name")) {
								wraparr.splice(i, 1);
								i--;
							}
						}
						$(this).remove();
					}
				})
				//console.log($(".wrap img").css("transform").match(/matrix\(\d+, \d+, \d+, \d+, \d+, (\d+)\)/)[1])
				console.log(arr, wraparr)
			}
			//下一关按钮
			$(".xiayiguan").on("click", function() {
				sd*=.9;
				$(document).on("keydown", function(e) {dKeydown(e)})
				$on.on("click", offClick);
				$off.on("click", onClick);
				num = 0;
				arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "G", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
				wraparr = [];
				$(".xiayiguan").animate({
					top: "-414px"
				})
				$(".wrap img").css("animation-play-state", "running")
				inter = setInterval(kaishi, sd);
			})
			//添加键盘事件
			
			
			
			function dKeydown(e){
				$(".wrap img").each(function() {
					if(e.key.toUpperCase() == $(this).data("name")) {
						fs++;
						num++;
						if(num > 9) {
							$(document).off("keydown");
							$on.off("click");
							$off.off("click");
							$(".xiayiguan").animate({
								top: 0
							})
							$(".wrap img").remove();
							clearInterval(inter);
							$(".wrap img").css("animation-play-state", "paused")
						}
						$fs.html(fs);
						arr.push($(this).data("name"));
						for(var i = 0; i < wraparr.length; i++) {
							if(wraparr[i] == $(this).data("name")) {
								wraparr.splice(i, 1);
								i--;
							}
						}
						$(this).remove();
					}
				})
			}
		</script>
	</body>

</html>